<template>
  <div class="header">
    <fheader></fheader>
    <div class="box"></div>
    <el-row>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <div style="margin:80px 100px;" v-for="i in beautyList" :key="i.id">
            <el-card style="padding:20px 40px;">
              <img :src="i.image" style="width:100%;height:100%; vertical-align: middle;">
              <div style="margin-top:30px;">
                <h1>
                  {{i.title}}
                </h1>
                <div style="margin-top:15px;font-size:20px;">
                  {{i.text}}
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="5" class="">
        <div class="right-background"></div>
        <div class="grid-content bg-purple" style="margin-left: 60px">
          <div style="font-size: 24px; margin-top: 100px; font-weight: bold">
            美食特产
          </div>
          <el-card style="margin-top: 10px">
            <div>
              <ul style="display: flex; flex-direction: column">
                <li class="foodTitle mp-10" v-for="(i, index) in foodsTiteList" :key="index">
                   <i class="el-icon-star-on" style="margin-top:5px;"></i>
                  {{ i }}
                </li>
              </ul>
            </div>
          </el-card>
          <strong style="font-size: 24px; position: relative; top: 70px">美食展示</strong>
          <ul class="flex">
            <li v-for="item in foodsList" :key="item.id" style="width: 100%">
              <el-card class="card">
                <div style="display: flex; flex-direction: column">
                  <img style="width: 100%; height: 250px" :src="item.image" alt="" />
                  <div class="card-right" style="">
                    <div style="display:flex;flex-direction:row; justify-content:space-between;margin-top: 20px;">
                      <h2>{{ item.title }}</h2>
                      <el-button round type="primary" @click="handle(item.title)">详情</el-button>
                    </div>
                    <div style="height:5px;width:100px;background-color:red;margin:20px 0"></div>
                    <!-- <div>{{item.text}}</div> -->

                  </div>
                </div>
              </el-card>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <Ffooter/>
  </div>
</template>

<script>
  import fheader from "@/components/Header.vue";
  import Ffooter from '@/components/footer.vue'
  export default {
    components: {
      fheader,
      Ffooter
    },
    data() {
      return {
        foodsList: [],
        beautyList: [],
        foodsTiteList: [],

      };
    },
    mounted() {
      this.getFoodList();
      this.getbeautyList();
    },
    methods: {
      getFoodList() {
        this.$api.food.getFood().then((response) => {
          this.foodsList = response.data;
          response.data.map((item) => {
            this.foodsTiteList.push(item.title);
          });
          // 'id':item.id,
          // 'image':item.image,
          // 'title':item.title,
          // 'text':item.text
        });
      },
      getbeautyList() {
        this.$api.beauty.getBeauty().then((res) => {
          this.beautyList = res.data;
        });
      },
      handle(e) {
        localStorage.setItem("msg", '温岭' + e)
        let routeUrl = this.$router.resolve({
          path: '/foodsbuy'
        })
        window.open(routeUrl.href, '_blank')
      }
    },
  };

</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // position: relative;
  }

  .box {
    // position: absolute;
    top: 0;
    // z-index: 0;
    width: 100%;
    height: 500px;
    // background: rgba(1, 94, 75, 0.5);
    background: url("https://images.unsplash.com/photo-1640782544167-391b83f75c98?ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDE4fHwlRTklQTMlOEUlRTYlOTklQUZ8ZW58MHx8fHwxNjQ5MjI2Mzk2&ixlib=rb-1.2.1&w=750&dpi=2") no-repeat;
    background-size: 100% 100%;
  }

  // >>>.el-card__body {
  //   // display: flex;

  // }

  .card {
    width: 100%;
    // height: 300px;

    .card-right {
      flex: 1;
      display: inline-block;

      >>>.el-button.is-round {
        padding: 9px 23px;
      }
    }
  }

  .flex>li {
    z-index: 2;
    // width: 1440px;
    // height: 400px;
    margin-top: 80px;
    margin-bottom: 20px;
    // border: 1px solid black;
  }

  .right-background {
    position: absolute;
    width: 25%;
    height: 100%;
    background: url("../assets/foodbackground.png");
    opacity: 0.05;
  }

  .foodTitle:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.349);
  }

  .mp-10 {
    margin: 5px 10px;
    padding: 0px 0 15px 0px;
    font-size: 24px;
    font-weight: bold;
  }

  // .mp-10::before {
  //   content: "";
  //   display: inline-block;
  //   height: 20px;
  //   width: 20px;
  //   position: relative;
  //   top: 2px;
  //   margin-top: 5px;
  //   background: url("../assets/folk.png") no-repeat;
  //   background-size: 100%;
  // }

</style>>
